<template>
  <!-- 故障信息配置 -->
  <div>
    <a-tabs v-model:activeKey="activeKey" @change="handleTabChange">
      <a-tab-pane
        v-for="item in FAULT_INFORMATION_TYPE"
        :key="item.value"
        :tab="item.label"
      />
    </a-tabs>

    <component :is="tabComponent" ref="monitorRef" :nowTab="activeKey" />
  </div>
</template>
<script setup>


import {
  FAULT_INFORMATION_TYPE,
  FAULT_INFORMATION_TAB_ENUM,
} from "@/constants/faultRegistration.js"
import Handling from "./conpoments/Handling.vue"
import PriceDifference from "./conpoments/PriceDifference.vue"
import TimeSlotConfig from "./conpoments/TimeSlotConfig.vue"
import TemplateConfig from "./conpoments/TemplateConfig.vue"
import PlannedOutage from "./conpoments/PlannedOutage.vue"
const $api = inject("$api")
const activeKey = ref(FAULT_INFORMATION_TAB_ENUM.Handling)
const tabComponent = computed(() => {
  switch (activeKey.value) {
    case FAULT_INFORMATION_TAB_ENUM.Handling:
      return Handling
    case FAULT_INFORMATION_TAB_ENUM.PlannedOutage:
      return PlannedOutage
    case FAULT_INFORMATION_TAB_ENUM.PriceDifference:
      return PriceDifference
    case FAULT_INFORMATION_TAB_ENUM.TimeSlotConfig:
      return TimeSlotConfig
    case FAULT_INFORMATION_TAB_ENUM.TemplateConfig:
      return TemplateConfig
    default:
      return Handling
  }
})
</script>
<style lang="less" scoped>
.ant-table {
  .ant-btn {
    padding: 4px 5px;
  }
}
.formInput {
  width: 155px;
}
.filterBtn {
  margin: 0 20px 20px 0;
  &:last-child {
    margin-right: 0;
  }
}
.tableContent {
  border-radius: 4px;
  background-color: #141414;
  padding: 8px;
}
</style>
